import React, { memo, useEffect } from "react";
import { shallowEqual, useDispatch, useSelector } from "react-redux";

import "./index.scss";
import playActions from "store/action/play";
import WYThemeHeaderPlayer from "components/theme-header-player";
import { getSizeImage } from "@/utils/format-utils";

const WYPlayerSongs = memo(function (props) {
  // redux
  const dispatch = useDispatch();
  const simiPlayList = useSelector(
    (state) => state.getIn(["play", "simiPlayList"]),
    shallowEqual
  );
  useEffect(() => {
    dispatch(playActions.getSimiPlayList());
  }, [dispatch]);

  return (
    <div className="player-songs">
      <WYThemeHeaderPlayer title="包含这首歌的歌曲" />
      <div className="songs">
        {simiPlayList.length > 0 &&
          simiPlayList.map((item) => (
            <div className="song-item" key={item.id}>
              <a href="#/" className="image">
                <img src={getSizeImage(item.coverImgUrl, 50)} alt="" />
              </a>

              <div className="info text-nowrap">
                <a href="#/" className="name">
                  {item.name}
                </a>
                <div className="auchor">
                  by
                  <a href="#/" className="nickname">
                    {item.description}
                  </a>
                </div>
              </div>
            </div>
          ))}
      </div>
    </div>
  );
});

export default WYPlayerSongs;
